import { RouterButton } from '../../../../components'
import { getCurrentTime } from '../../../../lib'

export default function Page(props:any) {
  return (
    <main>
      <h1>Comments List Page</h1>
      <h4>{props.dt}</h4>
      <RouterButton />
      <ul>
      { props.data.map((item:any, index:number) => (
        <li key={index}>
          <h4>{item.body}</h4>
        </li>
      ))
      }
      </ul>
    </main>
  )
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { postId: '1' } },
      { params: { postId: '2' } },
      { params: { postId: '47' } },
    ],
    fallback: false,
  }
}

export async function getStaticProps (context:any) {
  // console.log(context)
  const dt = getCurrentTime()
  const response = await fetch('https://dummyjson.com/comments')
  const reply = await response.json()
  // console.log(reply.comments.map((c:any) => c.postId))
  return ({
    props: {
      dt,
      data: reply.comments.filter((item:any) => item.postId == context.params.postId)
    },
    revalidate: 6000,
  })
}
